<template>
	<view class="flex-col-xc">
		<view class="title-bg flex-row-yc">
			<view @click="back" class="item-icon"><u-icon name="arrow-left" color="#fff"></u-icon></view>
			<view class="flex1 text">请假申请</view>
		</view>
		<view class="flex-row-yc item">
			<view class="flex1">请假范围</view>
			<view>
				<up-radio-group v-model="radiovalue" placement="row" @change="groupChange">
					<up-radio label="驾驶员" name="驾驶员">
					</up-radio>
					<up-radio class="car-radio" label="车辆" name="车辆">
					</up-radio>
				</up-radio-group>
			</view>
		</view>

		<view class="flex-row-yc item">
			<view class="flex1">请假开始时间</view>
			<up-datetime-picker hasInput :show="startTimeShow" v-model="startTime" mode="datetime"></up-datetime-picker>
			<view class="item-icon"><u-icon name="arrow-right" color="#76a2d3"></u-icon></view>
		</view>
		<view class="flex-row-yc item">
			<view class="flex1">请假结束时间</view>
			<up-datetime-picker hasInput :show="endTimeShow" v-model="endTime" mode="datetime"></up-datetime-picker>
			<view class="item-icon"><u-icon name="arrow-right" color="#76a2d3"></u-icon></view>
		</view>
		<view class="flex-row-yc item">
			<view class="flex1">请假原因</view>
			<input class="text" placeholder="请填写请假原因" />
		</view>

		<view class="bottom" @click="submitRequest">提交申请</view>
	</view>
</template>

<script>
	import {
		DriverDayOff
	} from '../../api/leave.js';
	export default {
		data() {
			return {
				radiovalue: '驾驶员',
				type: 1,
				startTime: Date.now(),
				startTimeShow: false,
				endTime: Date.now(),
				endTimeShow: false,
				mark: '',
				mineInfo: {}
			}
		},
		created() {
			try {
				const value = uni.getStorageSync('mine_info');
				if (value) {
					this.mineInfo = JSON.parse(value);
					console.log(this.mineInfo, "8887");
				}
			} catch (e) {
				// error
			}
			this.bindCar();
		},
		methods: {

			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			groupChange(e) {
				this.radiovalue = e;
				this.type = this.radiovalue === '驾驶员' ? 1 : 2;
			},

			bindCar() {
				let param = {
					LX: 2,
					drid: this.mineInfo.acid
				}
				DriverDayOff(param).then(res => {
					console.log("获取绑定车辆:", res)
					let {
						code,
						data
					} = res
				})
			},

			submitRequest() {
				let type = this.radiovalue === '驾驶员' ? 1 : 2;
				let param = {
					LX: 0,
					offid: this.mineInfo.acid,
					type: type,
					begintime: this.startTime,
					endtime: this.endTime,
					mark: this.mark,
				}
				DriverDayOff(param).then(res => {
					console.log("***8", res)
					let {
						code,
						data
					} = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-page-body,
	html,
	body,
	.page {
		width: 100%;
		height: 100%;
		background-color: white;
	}

	.title-bg {
		width: 100%;
		padding: 0 10px;
		height: 65px;
		background: linear-gradient(-90deg, #3C88D8 0%, #7CAFE7 100%);


		.text {
			color: #FFFFFF;
			font-size: 16px;
			font-weight: 600;
			margin-left: 10px;
		}
	}

	.item {
		width: 100%;
		height: 45px;
		border-bottom: aquamarine 1px solid;
		padding: 0 10px;

		.car-radio {
			margin-left: 10px;
		}

		.text {
			text-align: end;
		}
	}

	.bottom {
		margin-top: 50px;
		width: 70%;
		height: 45px;
		background: linear-gradient(-90deg, #3C88D8 0%, #7CAFE7 100%);
		text-align: center;
		line-height: 45px;
		color: white;
		border-radius: 3px;
	}

	::v-deep .u-border,
	::v-deep .u-border:after,
	::v-deep .up-border {
		border: none !important;
	}

	::v-deep .uni-input-input {
		text-align: end;
	}
</style>